<template>
    <div>
        <Row>
            <Card>
                <Icon type="md-people"></Icon>
                用户列表
            </Card>
            <Card>
                <div>
                    <Input v-model="searchObj.name" placeholder="请输入用户昵称搜索..." class="searchItem"/>
                    <Input v-model="searchObj.mobile" placeholder="请输入手机号码搜索..." class="searchItem"/>
                    <!--<Input v-model="searchObj.city" placeholder="请输入城市搜索..." class="searchItem"/>-->
                    <Button type="primary" style="" class="searchButton" icon="search" @click="search()">搜索</Button>
                    <Button @click="cancel">取消</Button>
                    <Button style="float: right" type="primary" @click="model = true" >导出</Button>
                </div>
              <Modal
                v-model="model"
                title="选择导出项"
                @on-ok="excel">
                <CheckboxGroup v-model="columnsTitle2" @on-change="change">
                  <Checkbox v-for=" (item, index) in columnsTitle1" :key="index" :label="item.value">{{item.label}}</Checkbox>
                </CheckboxGroup>
              </Modal>
                <div class="edittable-con-1 list" style="">
                    <!--<can-edit-table refs="table1" @on-delete="handleDel" v-model="userList"-->
                    <!--:columns-list="userColumns"></can-edit-table>-->
                    <Table border ref="selection" :columns="userColumns" :data="userList"></Table>
                </div>
                <div style="text-align: center;margin-top: 20px">
                    <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import { getUserList } from '@/api/user'
import excel from '@/libs/excel'

export default {
  name: 'user-list',
  data () {
    return {
      model: false,
      columnsTitle1: [
        { label:'编号', value: '{"title":"编号","key":"id"}' },
        { label:'身份证号码', value:'{"title":"用户姓名","key":"name"}' },
        { label:'手机号码', value: '{"title":"手机号码","key":"mobile"}' },
        { label:'佣金', value: '{"title":"佣金","key":"reward"}' },
        { label:'客户经理', value: '{"title":"客户经理","key":"managerName"}' },
        { label:'客户经理姓名', value: '{"title":"客户经理姓名","key":"name"}' },
        { label:'上次登录时间', value: '{"title":"上次登录时间","key":"updateTime"}' },
        { label:'创建时间', value: '{"title":"创建时间","key":"createTime"}' }
      ],
      columnsTitle2: [
        '{"title":"编号","key":"id"}',
        '{"title":"用户姓名","key":"name"}',
        '{"title":"手机号码","key":"mobile"}',
        '{"title":"佣金","key":"reward"}',
        '{"title":"客户经理","key":"managerName"}',
        '{"title":"客户经理姓名","key":"name"}',
        '{"title":"上次登录时间","key":"updateTime"}',
        '{"title":"创建时间","key":"createTime"}'
      ],
      excelDate:[
        ['编号','身份证号码', '手机号码', '佣金','客户经理','客户经理姓名','上次登录时间','创建时间'],
        ['id', 'name', 'mobile','reward','managerName','name','updateTime','createTime']
      ],
      searchObj: {
        name: '',
        mobile: '',
        pageId: 1
      },
      userColumns: [
        {
          title: '用户编号',
          align: 'center',
          key: 'id',
          width: 100
        },
        {
          title: '用户姓名',
          align: 'center',
          key: 'name',
          width: 120
        },
        {
          title: '手机号码',
          align: 'center',
          key: 'mobile',
          width: 120
        },
        {
          title: '佣金',
          align: 'center',
          key: 'reward',
          width: 100
        },
        {
          title: '客户经理',
          align: 'center',
          key: 'managerName',
          width: 150
        },
        {
          title: '上次登录时间',
          align: 'center',
          key: 'lastTime',
          width: 180
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'updateTime',
          width: 180
        },
        {
          title: '操作',
          align: 'center',
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '10px' },
                on: {
                  click: () => {
                    this.goDetail(params.row.id)
                  }
                }
              }, '查看详情')
            ])
          }
        }
      ],
      userList: [],
      pageId: 1,
      totalPage: 10
    }
  },
  methods: {
    change (data) {
      if (data.length) {
        let _excelDate = [[],[]]
        data.forEach( item => {
          const itemData = JSON.parse(item)
          _excelDate[0].push(itemData.title)
          _excelDate[1].push(itemData.key)
        })
        this.excelDate = _excelDate
      }

    },
    excel () {
      if (this.userList.length) {
        this.exportLoading = true
        const params = {
          title: this.excelDate[0],
          key: this.excelDate[1],
          data: this.userList,
          autoWidth: true,
          filename: '用户列表'
        }
        excel.export_array_to_excel(params)
        this.exportLoading = false
      } else {
        this.$Message.info('表格数据不能为空！')
      }
    },
    getList () {
      const data = Object.assign({}, this.searchObj, {
        adminId:  this.$store.state.user.userType === 1?this.$store.state.user.userId:''
      })
      getUserList(data).then(data => {
        this.userList = data.data
        this.pageId = data.current_page
        this.totalPage = data.total
      })
    },
    goDetail (id) {
      this.$router.push({
        name: 'user_detail',
        query: {
          id: id
        }
      })
    },
    search () {
      if (arguments[0]) {
        this.searchObj.pageId = arguments[0]
      }
      this.getList()
    },
    cancel () {
      this.searchObj = {
        name: '',
        mobile: '',
        pageId: ''
      }
      this.getList()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
